<template>
<div class="upload-wrap">
		<el-dialog
			:title="$t('common.system_icon')"
			v-model="dialogVisible"
			:close-on-click-modal="false"
			custom-class="upload-dialog"
			:close-on-press-escape="false"
			@close="cancelFunc"
			:width="dialogWidth"
			:append-to-body="true"
		>
			<!--我的资源库-->
			<div class="fileContainer">
				<div class="file-type">
					<ul>
						<li :class="activeType == item.categoryId ? 'item active' : 'item'" v-for="(item, index) in typeList" :key="index" @click="selectTypeFunc(item.categoryId)">
							{{item.name}}
						</li>
					</ul>
				</div>
				<div class="file-content">
					<ul class="fileContainerUI clearfix">
						<li class="file" v-for="(item, index) in fileList" :key="index" @click="selectFileFunc(item, index)">
							<div v-if="item.selected == true" class="selectedIcon">
								<el-icon><Check /></el-icon>
							</div>
							<img v-if="this_config.fileType == 'image'" :scr="item.image" :style="'background-image:url(' + item.image + ')'" alt="" />
							<p class="desc">{{item.name}}</p>
						</li>
					</ul>
				</div>
			</div>

			<!--分页-->
			<div class="pagination-wrap">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="curPage"
					:page-sizes="[12, 24, 36, 42, 48]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totalDataNumber"
				></el-pagination>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button size="small" @click="cancelFunc">{{$t('common.cancel')}}</el-button>
					<el-button size="small" type="primary" @click="confirmFunc">{{$t('common.confirm')}}</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import FileApi from '@/api/file.js';
export default {
  components: {},
  data() {
    return {
      /*宽度*/
      dialogWidth: '910px',
      /*类别*/
      activeType: null,
      categoryId: '',
      /*图片类别*/
      typeList: [],
      /*图标路径*/
      imageUrl: null,
      /*弹窗显示*/
      dialogVisible: true,
      /*文件列表*/
      fileList: [],
      /*分类添加loading*/
      addLoading: false,
      /*默认值*/
      this_config: {
        /*上传个数*/
        total: 1,
        fileType: 'image'
      },
      /*记录选中的个数*/
      record: 0,
      /*是否加载完成*/
      loading: true,
      /*列表数据*/
      tableData: [],
      /*一页多少条*/
      pageSize: 18,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      /*是否显示图片类别编辑框*/
      isShowCategory: false,
      /*当前类别model*/
      category: null,
      /*选中图片*/
      fileIds: [],
      accept: ''
    };
  },
  props: ['config'],
  created() {
    /*覆盖默认值*/
    if (Object.prototype.toString.call(this.config).toLowerCase() === '[object object]') {
      for (let key in this.config) {
        if (this.config[key]) {
          this.this_config[key] = this.config[key];
        }
      }
      if (this.this_config['fileType'] == 'image') {
        this.accept = 'image/jpeg,image/png,image/jpg';
      } else {
        this.accept = 'video/mp4';
      }
    }
    this.getFileCategory();
    this.getData();
  },
  methods: {
    /*获取图片列表*/
    getFileCategory() {
      let self = this;
      let param = {
        pageIndex: self.curPage,
        pageSize: self.pageSize,
        parentId: self.activeType,
        fileType: self.this_config.fileType
      };
      FileApi.SystemPictureList(param, true).then(res => {
        self.loading = false;
        self.fileList = res.data.records;
        self.totalDataNumber = res.data.total;
      }).catch(error => {
        self.loading = false;
      });
    },
    /*获取分类列表*/
    getData: function () {
      let self = this;
      FileApi.PictureIndex({
        type: self.this_config.fileType
      }, true).then(res => {
        let type = [{
          categoryId: null,
          name: $t("common.all")
        }];
        self.typeList = type.concat(res.data);
        self.categoryId = self.typeList.categoryId;
        console.log('index', self.typeList);
      }).catch(error => {
        self.loading = false;
      });
    },
    /*添加图片类别*/
    addCategory() {
      this.isShowCategory = true;
      this.category = null;
    },
    /*修改类别*/
    editCategoryFunc(item) {
      this.isShowCategory = true;
      this.category = item;
    },
    /*关闭类别层*/
    closeCategoryFunc(e) {
      if (e != null) {
        this.getFileCategory();
      }
      this.isShowCategory = false;
    },
    /*删除类别提示*/
    deleteCategoryFunc(e) {
      ElMessageBox.confirm($t("common.delete_confirm_prompt"), $t("common.tip"), {
        confirmButtonText: $t("common.confirm_action"),
        cancelButtonText: $t("common.cancel_action"),
        type: 'warning'
      }).then(() => {
        this.deleteCategory(e);
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: $t("common.delete_cancelled")
        });
      });
    },
    /*删除类别*/
    deleteCategory(e) {
      let self = this;
      FileApi.deleteCategory({
        categoryId: e
      }).then(data => {
        ElMessage({
          message: $t("common.delete_success"),
          type: 'success'
        });
        self.activeType = null;
        self.getFileCategory();
        self.getData();
      }).catch(error => {
        ElMessage.error($t("common.delete_failed"));
      });
    },
    /*选择类别*/
    selectTypeFunc(id) {
      this.activeType = id;
      this.curPage = 1;
      this.getFileCategory();
    },
    /*选择第几页*/
    handleCurrentChange(val) {
      this.curPage = val;
      this.getFileCategory();
    },
    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getFileCategory();
    },
    /*选择上传图片*/
    fileChange(e) {
      console.log(e);
    },
    /*选择图片之前*/
    onBeforeUploadImage(file) {
      return true;
    },
    /*上传图片*/
    UploadImage(param) {
      let self = this;
      const loading = ElLoading.service({
        lock: true,
        text: $t("common.file_uploading"),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const formData = new FormData();
      formData.append('iFile', param.file);
      formData.append('categoryId', self.activeType == null ? 0 : self.activeType);
      formData.append('fileType', self.this_config.fileType);
      FileApi.uploadFile(formData).then(response => {
        loading.close();
        self.getFileCategory();
        param.onSuccess(); // 上传成功的图片会显示绿色的对勾
        // 但是我们上传成功了图片， fileList 里面的值却没有改变，还好有on-change指令可以使用
      }).catch(response => {
        loading.close();
        ElMessage({
          message: $t("common.file_upload_failed"),
          type: 'warning'
        });
        param.onError();
      });
    },
    /*选择图片*/
    selectFileFunc(item, index) {
      if (item.selected) {
        item.selected = false;
        this.record--;
      } else {
        item.selected = true;
        this.record++;
      }
      this.fileList[index] = item;
    },
    /*删除图片*/
    deleteFileFunc(e) {
      let self = this;
      let loading = null;
      ElMessageBox.confirm($t("common.delete_confirm_prompt"), $t("common.tip"), {
        confirmButtonText: $t("common.confirm_action"),
        cancelButtonText: $t("common.cancel_action"),
        type: 'warning'
      }).then(() => {
        loading = ElLoading.service({
          lock: true,
          text: $t("common.deleting"),
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let temp_list = [];
        if (e) {
          temp_list.push(e.fileId);
        } else {
          for (let i = 0; i < self.fileList.length; i++) {
            let item = self.fileList[i];
            if (item.selected) {
              temp_list.push(item.fileId);
            }
          }
        }
        if (temp_list.length == 0) {
          loading.close();
          ElMessage({
            message: $t("common.select_file"),
            type: 'warning'
          });
          return;
        }
        FileApi.deleteFiles({
          fileIds: temp_list.join(',')
        }, true).then(data => {
          loading.close();
          ElMessage({
            message: $t("common.delete_success"),
            type: 'success'
          });
          self.getFileCategory();
        }).catch(error => {
          loading && loading.close();
        });
      }).catch(() => {
        loading && loading.close();
        ElMessage({
          message: $t("common.delete_failed"),
          type: 'warning'
        });
      });
    },
    /*选择图片确认*/
    confirmFunc() {
      let list = [];
      let leng = 0;
      for (let i = 0; i < this.fileList.length; i++) {
        let item = this.fileList[i];
        if (item.selected) {
          let obj = {
            filePath: item.image
          };
          list.push(obj);
          leng++;
        }
        if (leng > this.this_config.total) {
          break;
        }
      }
      this.$emit('closeSystem', list);
    },
    /*取消*/
    cancelFunc() {
      this.$emit('closeSystem', null);
    }
  }
};
</script>

<style lang="scss">
.upload-dialog .el-dialog__body {
	padding-top: 0;
	padding-bottom: 0;
}

.upload-wrap-inline .leval-item {
	display: inline-block;
}

.upload-wrap-inline .upload-btn {
	float: right;
}

.fileContainer {
	position: relative;
	padding-left: 120px;
}

.fileContainer .file-type {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	overflow-y: auto;
	width: 120px;
}

.fileContainer .file-type li {
	padding: 10px 0;
	cursor: pointer;
	text-align: center;
	padding-right: 20px;
	min-height: 20px;
	position: relative;
}

.fileContainer .file-type li.active {
	background: #b4b4b4;
	color: #ffffff;
}

.fileContainer .file-type li .operation {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 20px;
}

.fileContainer .file-type li:hover .operation {
	display: block;
}

.fileContainer .file-content {
	height: 300px;
	text-align: center;
	overflow: hidden;
	padding: 10px;
	margin: 0;
	overflow-y: auto;
	border: 1px solid #c6c6c6;
}

.fileContainer li.file {
	float: left;
	margin: 10px 9px 0px;
	position: relative;
	width: 100px;
}

.fileContainer li.file img {
	display: inline-block;
	width: 100px;
	height: 100px;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #fff;
}

.fileContainer li.file p.desc {
	font-size: 12px;
	height: 15px;
	line-height: 15px;
	overflow: hidden;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}

.fileContainer li.file:hover .bottom-shade {
	display: block;
}

.fileContainer .bottom-shade {
	position: absolute;
	bottom: 16px;
	left: 0;
	background: rgba(0, 0, 0, 0.7);
	height: 26px;
	line-height: 26px;
	width: 100%;
	display: none;
	transform: all 0.2s ease-out 0s;
	color: #ffffff;
}
.fileContainer .bottom-shade a {
	color: #ffffff;
}

.fileContainer .selectedIcon {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 0;
	left: 0;
	background: #ff9900;
	z-index: 1;
	color: #ffffff;
	cursor: pointer;
}

// :focus {
//   outline: -webkit-focus-ring-color auto 1px;
// }

.upload-dialog .pagination-wrap {
	margin-top: 16px;
	text-align: right;
}

.move-type {
	max-height: 200px;
	overflow-y: auto;
}
.move-type li {
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	cursor: pointer;
}
.move-type li:hover {
	background: #c6e2ff;
}
</style>

